 /*
 * @description: 寝室视频审核
 * @Author: along
 * @Date: 2020-10-17
 * @Last Modified by: along
 * @Last Modified time: 2020-10-17
 */
<template>
    <div class="container dormExamineList">
        <!-- header -->
        <div class="header-nav">
            <div class="header-left">
                <div class="header-new-box">
                    <p class="header-new-box-title">公司名称</p>
                    <el-input
                        v-model="formData.company_name"
                        size="small"
                        placeholder="请输入公司名称"
                        clearable
                        @keydown.enter.native="getTableData(1)"
                    />
                    <!--<el-select
                        v-model="formData.company_name"
                        filterable
                        remote
                        clearable
                        size="small"
                        reserve-keyword
                        placeholder="请输入选择名称"
                        :remote-method="remoteMethod"
                        :loading="loading"
                        @change="changeHire()"
                    >
                        <el-option
                            v-for="item in suggestList"
                            :key="item.hire_no"
                            :label="item.company_name"
                            :value="item.company_name"
                        />
                    </el-select>-->
                </div>
                <div class="header-new-box">
                    <p class="header-new-box-title">产品名称</p>
                    <el-input
                        v-model="formData.series_title"
                        placeholder="请输入产品名称"
                        size="small"
                        clearable
                        suffix-icon="el-icon-search"
                        @change="getTableData(1)"
                        @keyup.native.enter="getTableData(1)"
                    />
                </div>
                <div class="header-new-box">
                    <p class="header-new-box-title">视频批次</p>
                    <el-select
                        v-model="formData.series_no"
                        clearable
                        filterable
                        placeholder="请选择"
                        size="small"
                        @change="getTableData(1)"
                    >
                        <el-option
                            v-for="item in batchList"
                            :key="item.series_index"
                            :label="item.series_index"
                            :value="item.series_index"
                        />
                    </el-select>
                </div>
                <div class="header-new-box">
                    <p class="header-new-box-title">提交审核时间</p>
                    <el-date-picker
                        v-model="date"
                        type="datetimerange"
                        :picker-options="pickerOptions()"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']"
                        align="right"
                        size="small"
                        @change="getTableData(1)"
                    />
                </div>
            </div>
        </div>
        <!-- /header -->

        <!-- table -->
        <el-table
            :data="tableData"
            height="100%"
            style="width: 100%;"
            border
            ref="dormExamineList"
            @select="fnSelect"
            @select-all="fnSelectAllTop"
            @selection-change="handleSelectionChange"
        >
            <el-table-column
                type="selection"
                width="40"
                fixed="left"
            />
            <el-table-column
                type="index"
                width="80"
                label="序号"
                align="center"
            />
            <el-table-column
                prop="company_name"
                label="公司名称"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="left"
            />
            <el-table-column
                prop="series_index"
                label="视频批次"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="left"
            />
            <el-table-column
                prop="series_title"
                label="产品名称"
                show-overflow-tooltip
                align="center"
            />
            <el-table-column
                prop="video_count"
                label="视频总数"
                show-overflow-tooltip
                align="center"
            />
            <el-table-column
                prop="video_audit_wait_count"
                label="待审核"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
            >
                <template slot-scope="scope">
                    <p
                        :style="{color: '#F53341'}"
                        v-if="scope.row.video_audit_wait_count"
                    >{{ scope.row.video_audit_wait_count }}</p>
                    <p v-else>--</p>
                </template>
            </el-table-column>
            <el-table-column
                prop="video_trans_success_count"
                label="处理完成/处理中"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
            >
                <template slot-scope="scope">
                    {{ scope.row.video_trans_success_count }} / {{ scope.row.video_trans_processing_count }}
                </template>
            </el-table-column>
            <el-table-column
                prop="submit_audit_time"
                label="提交审核时间"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="left"
            >
                <template slot-scope="scope">
                    {{ scope.row.submit_audit_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                </template>
            </el-table-column>
            <el-table-column
                prop="submit_admin_true_name"
                label="提交人"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="left"
            />
            <el-table-column
                label="操作"
                align="center"
                fixed="right"
                :width="120"
            >
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        class="curse-add"
                        @click="examineVideo(scope.row)"
                    >
                        查看
                    </el-button>
                    <!--<el-button
                        type="text"
                        class="curse-add"
                        @click="deleteVideo(scope.row)"
                    >
                        删除
                    </el-button>-->
                </template>
            </el-table-column>
        </el-table>
        <!-- /table -->

        <!-- /分页 -->
        <div class="pagination-wrapper clearfix">
            <el-checkbox
                v-model="checkedAll"
                :indeterminate="checkIndeterminate"
                @change="fnChangeChecked"
            >全选</el-checkbox>
            <el-button
                type="text"
                :disabled="multipleSelection.length == 0 ? true : false"
                @click="deleteAll()"
                :style="{marginLeft: '15px'}"
            >删除</el-button>
            <el-pagination
                background
                layout="total, prev, pager, next"
                :current-page.sync="page.now_page"
                :total="page.total_count"
                :page-size="page.page_size"
                @current-change="getTableData"
            />
        </div>

        <!-- 删除弹窗 -->
        <dialog-delete
            ref="delete"
            :url="'http://cdn.zsdx.cn/phaadmin/dialog-waring.png'"
            :title="'确定删除该批次的视频吗?'"
            :content="'删除之后不可以撤销'"
            @confrim="confrim()"
        />

        <!-- 全选删除弹窗 -->
        <dialog-delete
            ref="deleteAll"
            :url="'http://cdn.zsdx.cn/phaadmin/dialog-waring.png'"
            :title="'确定删除所选择批次的视频吗?'"
            :content="'删除之后不可以撤销'"
            @confrim="confrimAll()"
        />
    </div>
</template>

<script>
import { back } from '@/mixin/back';
import dialogDelete from '@/components/dialog/index.vue';

const FILTER = {
    company_name: '',//公司名称
    series_title: '',//产品名称
    series_no: '',//视频批次
};

const LIST = {
    suggestList: [],//公司名称列表
    loading: false,
    batchList: [],//视频批次列表
    date: [],//审核时间筛选
};

export default {
    mixins: [back],
    components: {
        dialogDelete
    },
    data () {
        return {
            ID: '',
            formData: {
                ...FILTER,
            },
            ...LIST,
            checkIndeterminate: false,
            multipleSelection: [],
            checkedAll: false,
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            tableData: [{
                shop_title: '杭州新麦科技有限公司'
            }],
            authResult: {}
        };
    },
    filters: {},
    computed: {},
    watch: {},
    mounted () {
        this.init();
    },
    methods: {
        /**
         * @description 初始化页面数据
         */
        init () {
            this.$store.commit('SET_HEADER', [{ title: "官网"},{title: '商家增值服务'},{title: '寝室视频审核'}]);
            this.authResult = this.$route.meta.authResult;
            this.getTableData();
            this.getSuggest();
            this.getBatchList();
        },

        /**
         * @description 获取表格数据
         */
        getTableData (page) {
            this.$post('/student/room_series%5Cget_link_hire_list', {
                page_id: page || this.page.now_page,
                company_name: this.formData.company_name,
                series_title: this.formData.series_title,
                series_index: this.formData.series_no,
                start_submit_time: this.date === null ? '' : (this.date.length == 0 ? '' : parseInt(new Date(this.date[0]).getTime() / 1000)),
                end_submit_time: this.date === null ? '' : (this.date.length == 0 ? '' : parseInt(new Date(this.date[1]).getTime() / 1000)),
                is_audit: 1
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * @description 获取视频批次列表
         */
        getBatchList () {
            this.$post('/student/room_series%5Cget_series_index_list', {
                hire_no: this.formData.hire_no,
                keyword: '',
                is_audit: 1
            }, resp => {
                if (resp.code == 1) {
                    this.batchList = resp.data.list;
                }
            });
        },

        /**
         * @description 获取商家列表
         */
        getSuggest (keyword) {
            this.$post('/student/room_series%5Cget_company_list', {
                keyword: keyword
            }, resp => {
                if (resp.code == 1) {
                    this.suggestList = resp.data.list;
                }
            });
        },

        /**
         * @description 选择商家
         */
        changeHire () {
            this.getTableData(1);
            this.getBatchList();
        },

        /**
         * @description 搜索公司名称
         */
        remoteMethod (query) {
            if (query !== '') {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.getSuggest(query);
                }, 200);
            }
        },

        /**
         * @description 删除审核视频
         */
        deleteVideo (row) {
            if(!this.authResult.auth_delete) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            this.ID = row.series_no;
            this.$refs.delete.showDialog();
        },

        /**
         * @description 确定删除
         */
        confrim () {
            this.$post('/student/room_series%5Cdelete',{
                series_no: this.ID
            },resp=>{
                if (resp.code == 1) {
                    this.getTableData();
                    this.$notify({
                        title: '提示',
                        message: '删除成功',
                        type: 'success',
                        duration: 2000
                    });
                } else if (resp.code == 0) {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 审核视频
         */
        examineVideo (row) {
            this.$router.push({
                name: 'dormVideoExamine',
                query: {
                    series_no: row.series_no,
                    mode: 'detail'
                }
            });
        },

        /**
         * @description 全部删除
         */
        deleteAll () {
            this.$refs.deleteAll.showDialog();
        },

        /**
         * @description 确定全部删除
         */
        confrimAll () {
            // console.log('multipleSelection', this.multipleSelection);

            let sessionList = this.multipleSelection.reduce((cur,next) => {
                cur.push(next.series_no);
                return cur;
            },[]);

            sessionList.map(item => {
                this.$post('/student/room_series%5Cdelete',{
                    series_no: item
                },resp=>{
                    if (resp.code == 1) {
                        //
                    }
                });
            });

            setTimeout(()=> {
                this.getTableData();
                this.$notify({
                    title: '提示',
                    message: '删除成功',
                    type: 'success',
                    duration: 2000
                });
            },500);
        },

        /**
         * @description 全选逻辑操作
         */
        fnSelect(selection) {
            if(selection.length == this.tableData.length) {
                this.checkedAll = true;
            }else{
                this.checkedAll = false;
            }
            if(selection.length > 0 && selection.length < this.tableData.length) {
                this.checkIndeterminate = true;
            }else{
                this.checkIndeterminate = false;
            }
        },
        fnSelectAllTop(selection) {
            if(selection.length > 0) {
                this.checkedAll = true;
            }else{
                this.checkedAll = false;
            }
            if(selection.length > 0 && selection.length < this.tableData.length) {
                this.checkIndeterminate = true;
            }else{
                this.checkIndeterminate = false;
            }
        },
        fnChangeChecked() {
            if(this.checkedAll){
                this.toggleSelection(1);
            }else{
                this.toggleSelection();
            }
        },
        toggleSelection(rows) {
            if (rows) {
                this.$refs.dormExamineList.toggleAllSelection();
            } else {
                this.$refs.dormExamineList.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        /**
         * @description 时间处理
         */
        pickerOptions () {
            return {
                shortcuts : [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();

                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();

                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();

                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            };
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
    .container {
        background-color: #fff;
        padding: 24px 15px 5px 15px;
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        .header-nav {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            .header-left, .header-right {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
            }
            .header-new-box {
                display: flex;
                margin-right: 32px;
                align-items: center;
                color: #606266;
                margin-bottom: 24px;
                white-space: nowrap;
                &-title {
                    margin-right: 16px;
                    white-space: nowrap;
                }
            }
        }
        /* 表单 */
        .scope-price {
            width: 50px;
            height: 50px;
        }
        /* 字体高亮 */
        .cursor-font {
            color: rgb(64, 158, 255);
            cursor: pointer;
        }
        /* 分页 */
        .pagination-wrapper {
            padding-top: 10px;
            padding-bottom: 10px;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
    }
    /* 排序 */
    .sort-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        .sort-spliter {
            width: 1px;
            height: 12px;
            background: rgba(235, 235, 235, 1);
            margin: 0 10px;
            }
            .btn-sort {
            font-size: 14px;
            line-height: 1;
            color: #ccc;
            &:hover {
                color: #20a0ff;
            }
        }
    }
    .el-button-left {
        margin-left: 40px;
    }
    .el-button-right {
        margin-right: 10px;
    }
</style>
<style lang="less">
    .dormExamineList{
        .el-table__body-wrapper .el-table__body .el-table__row td {
            border-right: none;
        }
        .el-table__header-wrapper .el-table__header .has-gutter tr th {
            border-right: none;
        }
        .el-table .el-table_1_column_6  .cell {
            position: relative;
        }
        .el-range-editor--small .el-range-separator{
            padding: 0 1px !important;
        }
    }
</style>
